<template>
  <div class="trees">
    <div class="Int" v-if="inputShow">
      <el-input
        placeholder="输入关键字搜索"
        v-model="filterText"
        @change="filterChange"
      >
      </el-input>
    </div>
    <el-scrollbar style="flex:1" wrap-class="scrollbar-wrapper">
      <el-tree
        ref="treeList"
        :data="treeData"
        :props="defaultProps"
        :load="lazyLoad"
        :lazy="lazy"
        node-key="id"
        :highlight-current="true"
        :default-expand-all="false"
        :expand-on-click-node="false"
        :filter-node-method="filterNode"
        :render-content="renderContent"
        @node-click="handleNodeClick"
      >
        <span slot-scope="{ node, data }" class="custom-tree-node">
          <span class="svg-container">
            <i
              v-if="data.children && data.children.length > 0"
              class="el-icon-location"
              style="color:#c99801"
            />
            <i v-else class="el-icon-document" />
          </span>
          <span>{{ node.label }}</span>
        </span>
      </el-tree>
    </el-scrollbar>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    inputShow: {
      type: Boolean,
      defalut: false
    },
    treeData: {
      type: Array,
      default: () => []
    },
    // 默认设置加载
    lazy: {
      type: Boolean,
      defalut: true
    },
    // 默认配置
    defaultProps: {
      type: Object,
      defalut: () => {
        return {}
      }
    },
    sysOrgName: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      filterText: "" // 关键字
    }
  },
  watch: {
    sysOrgName: {
      handler(newValue) {
        this.filterText = newValue
      },
      immediate: true
    }
  },
  methods: {
    handleNodeClick(data, node) {
      console.log(data)
      this.$emit("handleNodeClickTree", data, node)
    },
    // 过滤字段搜索
    filterChange(val) {
      this.$refs.treeList.filter(val)
    },
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    // 树的删除按钮
    remove(node, data) {
      this.$emit("deleteHandle", node, data)
    },
    // 加在子集数据
    lazyLoad(node, resolve) {
      this.$emit("getlazyLoad", node, resolve)
    },
    // 自定义内容
    renderContent(h, { node, data, store }) {
      return (
        <span class="custom-tree-node">
          <span>{node.label}</span>
          <span>
            <el-button
              size="mini"
              type="text"
              on-click={() => this.remove(node, data)}
            >
              删除
            </el-button>
          </span>
        </span>
      )
    }
  }
}
</script>
<style lang="scss" scoped>
.trees {
  width: 100%;
  height: 100%;
  padding: 10px;
  display: flex;
  flex-direction: column;
  .Int {
    margin: 10px;
  }
  /deep/.scrollbar-wrapper {
    overflow-x: hidden !important;
  }
  .custom-tree-node {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    span {
      i {
        margin-right: 5px;
      }
      &:nth-child(2) {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
    }
  }
  /deep/ .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
}
</style>
